<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/axios.min.js"></script>
    <script src="/js/query.js"></script>

    <script>
        var productId;
        window.onload = function (){
            //得到从前一页面提交的商品ID
            productId = getQuery("id");
            findProduct();
        }

        function findProduct(){
            axios.get("/product/findById",{
                params:{
                    id:productId
                }
            }).then(resp =>{
                var info = resp.data;
                $("productImg").src = "/img/product/"+info.imgPath;
                $("nameSpan").innerHTML = info.name;
                $("priceSpan").innerHTML = info.price;
                $('speakNumSpan').innerHTML = info.speakNum;

                this.fullTable(info.speakList);
            })
        }

        /**
         * 填充评论表格
         * @param speakList
         */
        function fullTable(speakList){
            var str = "";
            speakList.forEach(n =>{
               str += `<tr><td>${n.user.nickName}</td><td>${n.content}</td></tr>`;
            });
            $("data").innerHTML = str;
        }

        /**
         * 添加评论
         */
        function addSpeak(){
            axios.get("/speak/add",{
                params:{
                    productId,
                    content:$("content").value
                }
            }).then(resp =>{
                var info = resp.data;
                if(info == "noland"){
                    location.href = "/login.html?errorInfo=noland";
                }
                else{
                    fullTable(info);
                }

            });
        }
    </script>
</head>
<body>
    <div>
        <img src="" id="productImg" width="200" height="200"><br>
        商品名：<span id="nameSpan"></span><br>
        单价：<span id="priceSpan"></span><br>
        评论：<span id="speakNumSpan"></span><br>

        <table width="50%" border="1">
            <tbody id="data"></tbody>
        </table>

        请输入评价<input type="text" id="content">
        <input type="button" value="评论" onclick="addSpeak()">
    </div>
</body>
</html>